<!DOCTYPE html>
<html>

  <head>  
	<script src="/js/common.js"></script>
	<link rel="stylesheet" href="/css/main.css">
  </head>
  
  
  
  <body> 
	<div id="extensionDiv">
		<div id="cancelButton">X</div>
		<div id="domainText" style="font-size: 25px; color: red;"></div>
		<div id="content">
			<hr style="width: 90%;">
			<p class="title">Click or Drag to Select a Border Color</p>
			<p id="primaryColorSelected" display="none"></p>
			<canvas id="primaryColorBar" width="512" height="30" style="border:1px solid #D3D3D3;"></canvas>
			<div id="primaryDragContainer">
				<div id="primaryDragPointer" style="left: 42px; padding-top: 10px; background-image: url('/images/drag_pointer.png'); 
				background-size: 10px 10px; background-repeat: no-repeat; background-origin: content-box; background-position: center bottom;
				width: 10px;, height: 10px; position: fixed;">					
				</div>
			</div>
			<br/>
			<canvas id="secondaryColorBar" width="512" height="30" style="border:1px solid #D3D3D3;"></canvas>	
			<div id="secondaryDragContainer">
				<div id="secondaryDragPointer" style="left: 42px; padding-top: 10px; background-image: url('/images/drag_pointer.png'); 
				background-size: 10px 10px; background-repeat: no-repeat; background-origin: content-box; background-position: center bottom;
				width: 10px;, height: 10px; position: fixed;">					
				</div>
			</div>			
			<br/>
			<div id="colorDisplay">#FF0000</div>
			<br/><br/>
			
			<p class="title">Enter a Border Width</p>
			<input id="alertBorderWidthInput" type="text" value="10"><p class="text" style="display: inline;"> (in pixels)</p></input>
			<br/><br/>
			<button id="saveButton" class="button">Add this domain</button>
			<button id="removeButton" class="button">Remove this domain</button>
		</div>						
	</div>
  </body>
  
</html>